<!--
 * @Author: your name
 * @Date: 2021-09-06 14:38:29
 * @LastEditTime: 2021-09-06 14:57:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\5-javascript\day11\7-constructor.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one {
            background-color: teal;
            color: #fff;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <button id="btn">按钮</button>
    <div id="one">this is one</div>
    <script>
        var one = document.getElementById('one');
        console.log('one', one); //第一个one是字符串，第二个是查找到的id名one的文档和样式
        console.log('typeof one', typeof one); //typeof one     object

        var btn = document.getElementById('btn');
        btn.onclick = function() {
            one.innerText = "这是一"; //html文本内容为“这是一”
            alert(one.nodeName); //弹框 提示div类型
            alert(btn.nodeName); //弹框 提示button类型
        }
        console.log('btn', btn); //第一个btn是字符串，第二个是查找到的id名btn的文档和样式
        console.log('typeof btn', typeof btn); //typeof btn    btn

        // 测试关系
        console.log("document", document);
        console.log("document constructor", document.constructor); //function HTMLDocument
        console.log(document instanceof HTMLDocument); //true
        console.log(document instanceof Document); //true
        console.log(document instanceof Node); //true
        console.log(document instanceof Object); //true
        console.log(document instanceof Element); //false
        console.log(HTMLDocument.prototype instanceof Document); //true
        console.log("----");

        console.log("one", one);
        console.log("one constructor", one.constructor); //function HTMLDivElement
        console.log(one instanceof HTMLDivElement); //true
        console.log(one instanceof HTMLElement); //true
        console.log(one instanceof Element); //true
        console.log(one instanceof Node); //true
        console.log(one instanceof Object); //true
        console.log(one instanceof Document); //false
        console.log(HTMLDivElement.prototype instanceof Element); //true
    </script>
</body>

</html>